/**
 * @description: 屏幕尺寸：774px * 1432px
 * @author: ccarlos
 * @date 2020/5/17 21:05
 */
import React, { useState } from 'react';
import { Button, message, Badge, Drawer, ConfigProvider } from 'antd';
import { BellFilled } from '@ant-design/icons';
import AmapMap from './components/amap';
import HeaderDropDown from './components/headerDropdown';
import './visualBSP.css';

const ThemeConfig: React.FC<{ children?: React.ReactNode }> = ({children}) => {
    return (
        <ConfigProvider
            theme={{
                components: {
                    Button: {
                        /* 这里是你的组件 token */
                        colorPrimary: '#ffffffff',
                        algorithm: true, 
                    },
                },
            }}
        >
            {children}
        </ConfigProvider>
    )
}

const HeaderDrawer: React.FC<{isDrawerOpen: boolean, setIsDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>}> = ({isDrawerOpen, setIsDrawerOpen}) => { 
    return (
        <Drawer
            title={
                <div 
                    style={{ display: 'flex' }}
                >
                    <img src='/imgs/visual/header02.png' style={{ width: '20px', height: '20px', margin: '2px 4px 0 0' }}></img>
                    <div style={{ color: '#327db3ff' }}>消息通知</div>
                </div>
            }
            placement="right"
            closable={false}
            open={ isDrawerOpen }
            onClose={() => { setIsDrawerOpen(false) }}
            extra={ 
                <Button
                    onClick={() => { message.info('暂不支持此功能') }}
                    style={{ 
                        color: '#89afcaff',
                        backgroundImage: 'url(/imgs/visual/header01.png)',
                        backgroundSize: '100% 100%',  
                    }} 
                    type='link'
                >
                    查看历史
                </Button>
            }
            style={{ 
                color: 'white',
                backgroundColor: 'rgba(3, 20, 43, 1)',
                borderLeft: '1px solid #145E79',
            }}
            styles={{
                header: { 
                    height: '48px',
                    borderBottom: '1px solid #145E79',
                    padding: '10px',
                },
                body: { 
                    padding: '10px',
                },
            }}
        >
            <div>内容</div>
        </Drawer>
    )
}

function VisualBSP() {
    // 获取屏幕尺寸
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;

    // header区域高度
    const headerHeight = 0.08 * screenHeight;

    // 替换为你的高德地图开发者Key（需在高德开放平台申请）
    const AMAP_KEY = '76c16889f1d23d32bc11c6db58e3bf52';

    const [isDrawerOpen, setIsDrawerOpen] = useState(false);

    return (
        <div>
            {/* 基础地图展示 */}
            <div style={{ width: `${screenWidth}px` }}>
                <AmapMap 
                    mapKey={AMAP_KEY}
                    center={[100.085472, 31.655725]}
                    zoom={7}
                    height={screenHeight.toString()+'px'}
                ></AmapMap>
            </div>

            {/* 可视化展示组件 */}
            <div 
                style={{ 
                    zIndex: '99', 
                    width: `${screenWidth}px`,
                    height: `${screenHeight}px`,
                    position: 'absolute', 
                    top: '0', 
                    left: '0',
                    backgroundColor: 'rgba(255, 255, 255, 0)',
                    pointerEvents: 'none'
                }}
            >
                {/* head区域 */}
                <div
                    className='glow-border-bottom' 
                    style={{
                        backgroundColor: 'rgba(3, 20, 43, .9)',
                        backgroundImage: 'url(/imgs/visual/header00.png)',
                        backgroundSize: '100% 100%',
                        border: '1px solid #145E79',
                        height: `${headerHeight}px`,
                        pointerEvents: 'auto',
                        display: 'grid',
                        gridTemplateColumns: '1fr 1fr 1fr',
                        position: 'relative',
                    }}
                >
                    {/* 左侧区域 */}
                    <div
                        style={{
                            height: `${headerHeight}px`,
                            display: 'grid',
                            alignItems: 'center',
                            justifyItems: 'start',
                            padding: '0 0 0 8px',
                            // backgroundColor: 'rgba(206, 36, 14, 1)',
                        }}
                    >
                        <Button 
                            type="link"
                            onClick={() => message.info('此功能暂不支持')}
                            style={{ 
                                width: '80px',
                                height: '24px',
                                fontSize: '12px',
                                color: 'rgba(255, 255, 255, 1)',
                                pointerEvents: 'auto',
                                backgroundImage: 'url(/imgs/visual/header01.png)',
                                backgroundSize: '100% 100%',
                            }}
                            icon={<img src="/imgs/visual/header03.png" alt="icon" style={{ width: '12px', height: '12px' }}/>}
                        >
                            三维视图
                        </Button>
                    </div>

                    {/* 中间标题区域 */}
                    <div 
                        style={{ 
                            display: 'grid',
                            placeItems: 'center',
                        }}
                    >
                        <h2 
                            style={{ 
                                color: 'white',
                                fontSize: '22px',
                                fontFamily: 'system-ui',
                                fontStyle: 'italic',
                            }}
                        >
                            隧道施工地质灾害诊断平台
                        </h2>
                    </div>

                    {/* 右侧区域 */}
                    <div
                        style={{
                            height: `${headerHeight}px`,
                            display: 'grid',
                            gridTemplateColumns: 'auto 80px',
                            alignItems: 'center',
                            justifyItems: 'end',
                            padding: '0 8px 0 0',
                            // backgroundColor: 'rgba(206, 36, 14, 1)',
                        }}
                    >
                        <div onClick={ ()=>{setIsDrawerOpen(true)} } style={{ marginRight: '16px', cursor: 'pointer' }}>
                            <Badge dot>
                                <BellFilled style={{ color: '#2baedeff', fontSize: '16px' }}></BellFilled>
                            </Badge>
                        </div>
                        <HeaderDropDown></HeaderDropDown>
                    </div>
                </div>

                {/* body区域 */}
                <div
                    style={{ // calc(100% - 64px)
                        width: `${screenWidth}px`,
                        height: `${screenHeight - 64}px`,
                        display: 'grid',
                        gridTemplateColumns: '1fr 2fr 1fr',
                    }}
                >
                    {/* 主体左侧区域 */}
                    <div 
                        style={{ 
                            display: 'grid',
                            gridTemplateRows: '1fr 1fr 1fr',
                            backgroundColor: 'rgba(3, 20, 43, 0.2)',
                            pointerEvents: 'auto',
                        }}
                    >
                        <div
                            style={{ 
                                padding: '8px 0 1px 8px',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79', 
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                项目列表
                            </div>
                        </div>
                        <div
                            style={{ 
                                padding: '8px 0 1px 8px',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79',
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                装备统计
                            </div>
                        </div>
                        <div
                            style={{ 
                                padding: '8px 0 1px 8px',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79',
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                超欠挖统计
                            </div>
                        </div>
                    </div>

                    <div>2</div>

                    {/* 主体右侧区域 */}
                    <div 
                        style={{ 
                            display: 'grid',
                            gridTemplateRows: '1fr 1fr 1fr',
                            backgroundColor: 'rgba(3, 20, 43, 0.2)',
                            pointerEvents: 'auto',
                        }}
                    >
                        <div
                            style={{ 
                                padding: '8px 8px 1px 0',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79', 
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                项目列表
                            </div>
                        </div>
                        <div
                            style={{ 
                                padding: '8px 8px 1px 0',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79',
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                装备统计
                            </div>
                        </div>
                        <div
                            style={{ 
                                padding: '8px 8px 1px 0',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79',
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                超欠挖统计
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <HeaderDrawer isDrawerOpen={isDrawerOpen} setIsDrawerOpen={setIsDrawerOpen}></HeaderDrawer>
        </div>
    );
}

export default VisualBSP;
    